<template>
	<view>
		<view v-if="isloading" class="detail">
			<view class="title">
				{{detailData.title}}
			</view>
			<view class="info">
				<text class="author">{{detailData.author}}</text>

				<uni-dateformat class="uploadtime" :date="detailData.uploadtime" :threshold="[60000, 3600000]"
					format="yyyy/MM/dd hh:mm:ss"></uni-dateformat>
			</view>
			<view class="content">
				{{detailData.content}}
			</view>

			<view class="picurls" v-if="detailData.picurls && detailData.picurls.length">
				<view v-for="item in detailData.picurls">
					<image :lazy-load='true' :src="item || nopic" mode="widthFix"></image>
				</view>
			</view>
			<view class="btnGroup">
				<button size="mini" @click="goEdit">修改</button>
				<button size="mini" type="warn" @click="onRemove">删除</button>
			</view>
		</view>

		<view v-else>
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleID: 0,
				isloading: false,
				detailData: {},
				nopic: '../../static/images/nopic.jpg'
			};
		},
		onLoad(e) {
			console.log(e);
			this.articleID = e.id
		},
		onShow() {
			this.getRowDetail()
		},
		methods: {
			goEdit() {
				uni.navigateTo({
					url: "/pages/edit/edit?id=" + this.articleID
				})
			},
			// 获取详情信息
			getRowDetail() {
				uniCloud.callFunction({
					name: "CloudArticle-get_row",
					data: {
						id: this.articleID
					}
				}).then((res) => {
					console.log(res);
					if (res.result.data.length == 0) throw new Error('no')
					this.detailData = res.result.data[0]
					uni.setNavigationBarTitle({
						title: res.result.data[0].title
					})
					this.isloading = true
				}).catch((err) => {
					console.log(err);
					uni.showToast({
						icon: "error",
						title: "加载失败"
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 500)
				})
			},
			// 删除 弹窗确认
			onRemove() {
				uni.showModal({
					content: "是否确认删除？",
					success: res => {
						if (res.confirm) {
							this.removeRow()
						}
					}
				})
			},
			// 删除该文章
			removeRow() {
				uniCloud.callFunction({
					name: "CloudArticle-remove_row",
					data: {
						id: this.articleID
					}
				}).then(res => {
					uni.showToast({
						title: "删除成功~"
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 500)
				})
			},

		}
	}
</script>

<style lang="scss">
	.detail {
		padding: 30rpx;
		color: #333;

		.title {
			font-size: 50rpx;
			font-weight: 700;
			text-align: justify;
			margin-bottom: 30rpx;
		}

		.info {
			font-size: 30rpx;
			padding: 20rpx 20rpx;
			background-color: #eee;
			margin-bottom: 30rpx;

			.author {
				padding-right: 30rpx;
			}
		}

		.content {
			padding: 0 10rpx;
			font-size: 36rpx;
			text-align: justify;
			margin-bottom: 30rpx;
		}

		.picurls {
			padding-top: 50rpx;

			image {
				width: 100%;
				display: block;
				margin-bottom: 30rpx;
			}
		}

		.btnGroup {
			padding: 50rpx 0;
			text-align: center;

			button {
				margin-right: 30rpx;
			}
		}
	}
</style>